<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>IndexDB lab.</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./modern.css">
    <link href="./modern-responsive.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
    <style>
    li a {
display: inline;
padding-top: 0px;
float: none;
margin-left: 0px;
}
    </style>
     <script>
      var DbLab = {};
      window.indexedDB = window.indexedDB || window.webkitIndexedDB ||
                         window.mozIndexedDB;
      
      if ('webkitIndexedDB' in window) {
        window.IDBTransaction = window.webkitIDBTransaction;
        window.IDBKeyRange = window.webkitIDBKeyRange;
      }
      
      DbLab.indexedDB = {};
      DbLab.indexedDB.db = null;
      
      DbLab.indexedDB.onerror = function(e) {
        console.log(e);
      };
      
      DbLab.indexedDB.open = function() {
        var request = indexedDB.open("villes");
      
        request.onsuccess = function(e) {
          var v = 1;
          DbLab.indexedDB.db = e.target.result;
          var db = DbLab.indexedDB.db;
          // We can only create Object stores in a setVersion transaction;
          if (v != db.version) {
            var setVrequest = db.setVersion(v);
      
            // onsuccess is the only place we can create Object Stores
            setVrequest.onerror = DbLab.indexedDB.onerror;
            setVrequest.onsuccess = function(e) {
              if(db.objectStoreNames.contains("ville")) {
                db.deleteObjectStore("ville");
              }
      
              var store = db.createObjectStore("ville",
                {keyPath: "codePostal"});
              e.target.transaction.oncomplete = function() {
                DbLab.indexedDB.getAllvilleItems();
              };
            };
          } else {
            request.transaction.oncomplete = function() {
              DbLab.indexedDB.getAllvilleItems();
            };
          }
        };
        request.onerror = DbLab.indexedDB.onerror;
      };
      
      DbLab.indexedDB.addville = function(villeText, codePostalText) {
        var db = DbLab.indexedDB.db;
        var trans = db.transaction(["ville"], "readwrite");
        var store = trans.objectStore("ville");
      
        var data = {
          "text": villeText,
          "codePostal": codePostalText
        };
      
        var request = store.put(data);
      
        request.onsuccess = function(e) {
          DbLab.indexedDB.getAllvilleItems();
        };
      
        request.onerror = function(e) {
          console.log("Error Adding: ", e);
        };
      };
      
      DbLab.indexedDB.deleteville = function(id) {
        var db = DbLab.indexedDB.db;
        var trans = db.transaction(["ville"], "readwrite");
        var store = trans.objectStore("ville");
      
        var request = store.delete(id);
      
        request.onsuccess = function(e) {
          DbLab.indexedDB.getAllvilleItems();
        };
      
        request.onerror = function(e) {
          console.log("Error Adding: ", e);
        };
      };
      
      DbLab.indexedDB.getAllvilleItems = function() {
        var villes = document.getElementById("villeItems");
        villes.innerHTML = "";
      
        var db = DbLab.indexedDB.db;
        var trans = db.transaction(["ville"], "readwrite");
        var store = trans.objectStore("ville");
      
        // Get everything in the store;
        var cursorRequest = store.openCursor();
      
        cursorRequest.onsuccess = function(e) {
          var result = e.target.result;
          if(!!result == false)
            return;
      
          renderville(result.value);
          result.continue();
        };
      
        cursorRequest.onerror = DbLab.indexedDB.onerror;
      };
      
      function renderville(row) {
        var villes = document.getElementById("villeItems");
        var li = document.createElement("li");
        var a = document.createElement("a");
        var t = document.createTextNode(row.text);
      
        a.addEventListener("click", function() {
          DbLab.indexedDB.deleteville(row.codePostal);
        }, false);
      
        a.textContent = " [Supprimer]";
        li.appendChild(t);
        li.appendChild(a);
        villes.appendChild(li);
      }
      
      function addville() {
        var ville = document.getElementById("ville");
        var cp = document.getElementById("cp");
        DbLab.indexedDB.addville(ville.value, cp.value);
        ville.value = "";
        cp.value = "";
      }
      
      function init() {
        DbLab.indexedDB.open();
      }
      
      window.addEventListener("DOMContentLoaded", init, false);
    </script>
  </head>
  <body>
       <header>
      <div id="imglogo"></div>
      <div id="titrelogo">IOBH</div>
    </header>

    <div id="contenair" style="height: auto; display:block;width:100px;margin:auto;padding-top:20px;">
  	<h3>Villes automatiquement classées par leur code postal :</h3>
    <ul id="villeItems"></ul>
    <input type="text" id="ville" name="ville" placeholder="Un nom de ville" style="width: 200px;" />
    <input type="text" id="cp" name="cp" placeholder="Un code postal" style="width: 200px;" />
    <input type="submit" value="Ajouter la ville" onclick="addville(); return false;"/>
       </div>

  <footer>
    © 2012 Honoré & Giovanetti.
  </footer>


  </body>
</html>